<template>
  <view class="userItem">
    <view class="userImg">
      <image :src="imgIcon" mode="scaleToFill" />
    </view>
    <view class="userContent">
      <view class="baseData">
        <view class="userName uv-line-1">{{ title }}</view>
        <view class="updateTime uv-line-1">{{ desc }}</view>
      </view>
      <view class="otherData">刚刚</view>
    </view>
  </view>
</template>

<script setup>
import { ref, toRef, computed } from "vue";

const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});

const item = toRef(props, "item");

const messageType = {
  system: {
    icon: "/static/images/message/system.png",
    title: "系统消息",
  },
  reply: {
    icon: "/static/images/message/reply.png",
    title: "回复",
  },
  fans: {
    icon: "/static/images/message/fans.png",
    title: "粉丝",
  },
  wechat: {
    icon: "",
    title: "用户的名，等接口",
  },
};

const imgIcon = computed(() => {
  return messageType[item.value.type]?.icon || "";
});
const title = computed(() => {
  return messageType[item.value.type]?.title || "";
});
const desc = computed(() => {
  return "等接口吧";
});
</script>

<style lang="scss">
.userItem {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
}
.userImg {
  width: 86rpx;
  height: 86rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 16rpx;
}
.userContent {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1px solid #dcdcdc;
}
.baseData {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  margin-right: 40rpx;

  .userName {
    color: rgba(102, 102, 102, 1);
    font-size: 28rpx;
  }
  .updateTime {
    color: rgba(153, 153, 153, 1);
    font-size: 18rpx;
  }
}
.otherData {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 24rpx;
}
</style>
